<template>
  <div>
    <div class="search">
      <Row>
        <Col>
          <Card>
            <Row>
              <Form ref="searchForm" :model="searchForm" inline :label-width="140" class="search-form">
                <Form-item label="我的典型设计分类" prop="">
                  <Select v-model="searchForm.typical_classification_id" clearable filterable style="width:360px">
                    <Option v-for="(item,index) in sysTypicalClassList" :value="item.id" :key="index">
                      {{ item.classification_name }} 
                    </Option>
                  </Select>
                </Form-item>
                <Form-item style="margin-left:-100px;" class="br">
                  <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                  <Button @click="handleReset">重置</Button>
                </Form-item>
              </Form>
            </Row>
            <Row class="operation">
              <Button @click="add" type="primary" icon="md-add">添加我的典型设计</Button>
              <Button @click="addType" type="warning" icon="md-add">添加我的典型设计分类</Button>
              <Button @click="refresh" icon="ios-git-compare">刷新</Button>
            </Row>
            <Row>
              <Alert show-icon>
                已选择 <span class="select-count">{{selectCount}}</span> 项
                <a class="select-clear" @click="clearSelectAll">清空</a>
              </Alert>
            </Row>
            <Row>
              <Table
                border
                :loading="loading"
                :columns="columns"
                :data="data"
                sortable="custom"
                @on-selection-change="showSelect"
                ref="table">
              </Table>
            </Row>
            <Row type="flex" justify="end" class="page">
              <Page
                :current="searchForm.pageNumber"
                :total="total"
                :page-size="searchForm.pageSize"
                @on-change="changePage"
                @on-page-size-change="changePageSize"
                :page-size-opts="[10,20,50]"
                size="small"
                show-total
                show-elevator
                show-sizer
              ></Page>
            </Row>
          </Card>
        </Col>
      </Row>
    </div>
    <viewTypical :typical-design="typicalDesign" :typical-material="typicalMaterial" :type="showType" v-model="viewVisiable" />
    <editTypical :typical-design="typicalDesign" :typical-material="typicalMaterial" :type="showType" :typical-class-list="typicalClassList" v-model="editVisiable" />
    <Modal title="新增我的典型设计分类" v-model="addTypeVisiable" :mask-closable='false' :width="500" :styles="{top: '100px'}">
      <Form ref="newTypeForm" :model="newTypeForm" :label-width="140" :rules="newTypeFormValidate">
        <FormItem label="典型设计分类名称" prop="classification_name">
          <Input v-model="newTypeForm.classification_name"/>
        </FormItem>
        <FormItem label="描述" prop="description">
          <Input v-model="newTypeForm.description"/>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="cancelModel">取消</Button>
        <Button type="primary" :loading="submitLoading" @click="submitNewType">提交</Button>
      </div>
    </Modal>
    <Modal title="新增我的典型设计" v-model="newModelVisible" :mask-closable='false' :width="500" :styles="{top: '100px'}">
      <Form ref="newModelForm" :model="newModelForm" :label-width="120" :rules="newModelFormValidate">
        <FormItem label="典型设计类型" prop="typical_classification_id" class="margin-bottom-3">
          <Select v-model="newModelForm.typical_classification_id" clearable filterable style="width:350px">
            <Option v-for="(item,index) in newTypicalClassList" :value="item.id" :key="index">
              {{ item.classification_name }} 
            </Option>
          </Select>
        </FormItem>
        <FormItem label="设计序号" prop="serial_number" class="margin-bottom-3">
          <Input v-model="newModelForm.serial_number"/>
        </FormItem>
        <FormItem label="典型设计名称" prop="typical_name" class="margin-bottom-3">
          <Input v-model="newModelForm.typical_name"/>
        </FormItem>
        <FormItem label="杆型" prop="pole_type" class="margin-bottom-3">
          <Input v-model="newModelForm.pole_type"/>
        </FormItem>
        <FormItem label="杆径与杆高" prop="pole_highly" class="margin-bottom-3">
          <Input v-model="newModelForm.pole_highly"/>
        </FormItem>
        <FormItem label="适用范围" prop="apply_scope" class="margin-bottom-3">
          <Input v-model="newModelForm.apply_scope"/>
        </FormItem>
        <FormItem label="材料表说明" prop="description" class="margin-bottom-3">
          <Input v-model="newModelForm.description"/>
        </FormItem>
        <FormItem label="图号" prop="figure_number" class="margin-bottom-3">
          <Input v-model="newModelForm.figure_number"/>
        </FormItem>
        <FormItem label="排序规则" prop="sort_order" class="margin-bottom-3">
          <Input v-model="newModelForm.sort_order"/>
        </FormItem>
        <FormItem label="上传示例图" prop="typical_figure_path">
          <upload-pic-thumb :multiple="false" @on-upload="getUrl"></upload-pic-thumb>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="cancelModel">取消</Button>
        <Button type="primary" :loading="submitLoading" @click="submitNewModel">提交</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { getMyTypicalClass, getSysTypicals, getSysMaterials, insertSysTypicalDesign, insetSysTypicalClass } from '@/api/typical';
import moment from 'moment';
import viewTypical from './view';
import editTypical from './edit';
import util from '@/libs/util';
import { uploadFile } from "@/api/index";
import uploadPicThumb from "@/views/my-components/xboot/upload-pic-thumb";
export default {
  name: 'my_typical_manager',
  components: {
    viewTypical,
    editTypical,
    uploadPicThumb
  },
  data() {
    return {
      loading: false,
      searchForm: {
        typical_classification_id: '',
        sys_or_local: 2,
        pageNumber: 1,
        pageSize: 10
      },
      typicalDesignList: [],
      typicalClassList: [],
      newTypicalClassList: [],
      sysTypicalClassList: [],
      data: [],
      total: 0,
      selectCount: 0,
      exportData: [],
      selectList: [],
      typicalDesign: {},
      typicalMaterial: [],
      viewVisiable: false,
      editVisiable: false,
      addTypeVisiable: false,
      showType: '2',
      columns: [
        {
          type: "selection",
          width: 50,
          align: "center",
        },
        {
          type: "index",
          width: 50,
          align: "center",
        },
        {
          title: '设计序号',
          key: 'serial_number',
          width: 80,
          align: "center",
        },
        {
          title: '杆型',
          key: 'pole_type',
          align: "center",
          width: 120
        },
        {
          title: '名称',
          key: 'typical_name',
          align: "center",
          width: 200
        },
        {
          title: '适用电杆',
          key: 'pole_highly',
          width: 260
        },
        {
          title: '适用范围',
          key: 'apply_scope',
          width: 220
        },
        {
          title: '添加时间',
          key: 'add_time',
          align: "center",
          width: 100,
          render: (h, params) => {
            let re = moment(params.row.add_time).format('YYYY-MM-DD');
            return h("div", re);
          }
        },
        {
          title: '添加人',
          key: 'real_name',
          align: "center",
          width: 100
        },
        {
          title: '排序',
          key: 'sort_order',
          align: "center",
          width: 60
        },
        {
          title: '操作',
          key: 'action',
          width: 180,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.view(params.row)
                  }
                }
              }, '查看'),
              h('Button', {
                props: {
                  type: 'success',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.edit(params.row)
                  }
                }
              }, '编辑'),
            ]);
          }
        }
      ],
      newModelVisible: false,
      newModelForm: {
        sys_or_local: 2,
        typical_classification_id: 0,
        serial_number: '',
        typical_name: '',
        pole_type: '',
        pole_highly: '',
        typical_figure_path: '',
        apply_scope: '',
        description: '',
        figure_number: '',
        sort_order: null,
      },
      newModelFormValidate: {
        serial_number: [
          {required: true, message: "设计序号不能为空", trigger: "blur"}
        ],
        typical_name: [
          {required: true, message: "典型设计名称不能为空", trigger: "blur"}
        ],
        pole_type: [
          {required: true, message: "杆型不能为空", trigger: "blur"}
        ],
        sort_order: [
          {required: true, message: "排序规则不能为空", trigger: "blur"}
        ]
      },
      newTypeForm: {
        sys_or_local: 2,
        classification_name: '',
        description: ''
      },
      newTypeFormValidate: {
        classification_name: [
          {required: true, message: "典型设计分类名称不能为空", trigger: "blur"}
        ],
      },
      submitLoading: false,
    }
  },
  methods: {
    getSysTypicalClassification() {
      getMyTypicalClass().then(res => {
        if (res.code === 0) {
          this.sysTypicalClassList = res.data;
          this.newTypicalClassList = res.data;
          this.typicalClassList = res.data;
        }
      })
    },
    getSysTypicalList() {
      this.loading = true;
      getSysTypicals(this.searchForm).then(res => {
        this.loading = false;
        if (res.code === 0) {
          this.data = res.data.raws;
          this.total = res.data.count;
        }
      })
    },
    cancelModel() {
      this.newModelVisible = false;
      this.addTypeVisiable = false;
    },
    submitNewModel() {
      this.$refs.newModelForm.validate(valid => {
        if (valid) {
          this.submitLoading = true;
          insertSysTypicalDesign(this.newModelForm).then(res => {
            this.submitLoading = false;
            if (res.code === 0) {
              this.$Message.success(res.message);
              this.newModelVisible = false;
              this.refresh();
            }
          })
        }
      })
    },
    submitNewType() {
      this.$refs.newTypeForm.validate(valid => {
        if (valid) {
          this.submitLoading = true;
          insetSysTypicalClass(this.newTypeForm).then(res => {
            this.submitLoading = false;
            console.log(res)
            if (res.code === 0) {
              this.$Message.success(res.message);
              this.getSysTypicalClassification();
              this.newTypeForm.classification_name = '';
              this.newTypeForm.description = '';
              this.addTypeVisiable = false;
            }
          })
        }
      })
    },
    init() {
      this.getSysTypicalClassification();
      this.getSysTypicalList();
    },
    getUrl(v) {
      if (v.code === 0) {
        this.$Message.success(v.message);
      }
      this.newModelForm.typical_figure_path = v.data.url;
    },
    add() {
      const hasPermission = util.oneOf('add', this.$route.meta.permTypes);
      if (!hasPermission) {
        this.$Message.error('抱歉，您没有操作权限！');
        return;
      }; 
      this.newModelVisible = true;
      this.newModelForm.typical_classification_id = 0;
      this.newModelForm.serial_number = '';
      this.newModelForm.typical_name = '';
      this.newModelForm.pole_type = '';
      this.newModelForm.pole_highly = '';
      this.newModelForm.typical_figure_path = '';
      this.newModelForm.apply_scope = '';
      this.newModelForm.description = '';
      this.newModelForm.figure_number = '';
      this.newModelForm.sort_order = null;
    },
    addType() {
      const hasPermission = util.oneOf('addType', this.$route.meta.permTypes);
      if (!hasPermission) {
        this.$Message.error('抱歉，您没有操作权限！');
        return;
      }; 
      this.addTypeVisiable = true;

    },
    refresh() {
      this.getSysTypicalList();
    },
    handleSearch() {
      if (this.searchForm.typical_classification_id) {
        this.searchForm.pageNumber = 1;
        this.getSysTypicalList()
      } else {
        this.$Message.info('请选择系统典型设计分类');
        return;
      }
    },
    handleReset() {
      this.searchForm.typical_classification_id = '';
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getSysTypicalList();
    },
    clearSelectAll() {
      this.$refs.table.selectAll(false);
    },
    showSelect(e) {
      this.exportData = e;
      this.selectList = e;
      this.selectCount = e.length;
    },
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getSysTypicalList();
    },
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.getSysTypicalList();
    },
    view(v) {
      this.typicalDesign = v;
      const typical_design_id = v.id;
      getSysMaterials({typical_design_id}).then(res => {
        if (res.code === 0) {
          this.typicalMaterial = res.data;
        }
      });
      this.viewVisiable = true;
    },
    edit(v) {
      const hasPermission = util.oneOf('edit', this.$route.meta.permTypes);
      if (!hasPermission) {
        this.$Message.error('抱歉，您没有操作权限！');
        return;
      }; 
      this.typicalDesign = v;
      const typical_design_id = v.id;
      getSysMaterials({typical_design_id}).then(res => {
        if (res.code === 0) {
          this.typicalMaterial = res.data;
        }
      });
      this.editVisiable = true;
    },
  },
  mounted() {
    this.init();
  }
}
</script>
<style lang="less">
@import "./sysTypicalManager.less";
.margin-bottom-3 {
  margin-bottom: 14px;
}
</style>
